<!-- 商品项号关系 -->
<template>
    <Modal :value="value" @input="handleInput" width="600" :closable="false">
        <div slot="header" >
            商品项号关系
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <div class="table-Modal goods-modal">
            <table class="layui-hide" id="goodsRelationId" lay-filter="goodsRelationTable"></table>
        </div>
        <div slot="footer">
            <Button type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="saveGoodsRelation">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'GoodsRelationModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        goodsRelation: {
            default: function () {
                return {
                    CommInfoDataList: [],
                    contrItems: ''
                }
            },
            type: Object
        }
    },
    created () {
        this.checkedTableList = []
        this.init(this.goodsRelation.CommInfoDataList, this.goodsRelation.contrItems)
    },
    methods: {
        init (list, contrItems) {
            this.checkedTableList = []
            let data = list.slice()
            if (data.length === 0) {
                this.$Message.warning({
                    content: '请先录入商品信息！',
                    duration: 3
                })
            } else {
                const contrList = contrItems ? contrItems.split(',') : []
                this.checkedTableList = data.filter(item => {
                    item.LAY_CHECKED = contrList.includes(String(item.goodsIndex))
                    return item.LAY_CHECKED
                })
            }
            this.$nextTick(() => {
                this.renderTable(data)
            })
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        closeModel () {
            this.handleInput(false)
        },

        renderTable (list) {
            let that = this
            const limitLen = list.length + 1
            if (limitLen < 10) {
                window.layui.use('table', function () {
                    let table = window.layui.table
                    table.render({
                        elem: '#goodsRelationId',
                        cols: [[
                            { type: 'checkbox', fixed: 'left', width: 60 },
                            { field: 'goodsIndex', title: '项号', align: 'center', width: 90 },
                            { field: 'codeTs', title: '商品编号', align: 'center', width: 200 },
                            { field: 'goodsName', title: '商品名称', align: 'center', width: 205 }
                        ]],
                        data: list,
                        limit: limitLen
                    })
                    table.on('checkbox(goodsRelationTable)', function () {
                        let checkStatus = table.checkStatus('goodsRelationId')
                        that.checkedTableList = checkStatus.data
                    })
                })
            } else {
                window.layui.use('table', function () {
                    let table = window.layui.table
                    table.render({
                        elem: '#goodsRelationId',
                        height: 310,
                        cols: [[
                            { type: 'checkbox', fixed: 'left', width: 60 },
                            { field: 'goodsIndex', title: '项号', align: 'center', width: 90 },
                            { field: 'codeTs', title: '商品编号', align: 'center', width: 200 },
                            { field: 'goodsName', title: '商品名称', align: 'center', width: 183 }
                        ]],
                        data: list,
                        limit: limitLen
                    })
                    table.on('checkbox(goodsRelationTable)', function () {
                        let checkStatus = table.checkStatus('goodsRelationId')
                        that.checkedTableList = checkStatus.data
                    })
                })
            }
        },

        saveGoodsRelation () {
            let tempArr = []
            this.checkedTableList.forEach(item => {
                tempArr.push(item.goodsIndex)
            })
            this.$emit('saveGoodsRelation', tempArr.join())
            this.closeModel()
        }
    }
}
</script>
